<template>
  <div class="projectComponent" v-if="oItem" :style="{
      paddingTop: oItem.main.paddingTop + 'px',
      paddingBottom: oItem.main.paddingBottom + 'px',
      paddingLeft: oItem.main.paddingLR + 'px',
      paddingRight: oItem.main.paddingLR + 'px',
      backgroundColor: oItem.main.projectWrapperBgColor,
      backgroundImage: backgroundImage,
    }" v-loading="isReLayout" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="wrapper" :class="oItem.main.listStyle" v-if="oItem.main.listStyle === 'row2'">
      <div class="left" :id="'previewRowsLeft' + id" v-if="oItem.main.rows.left.length > 0">
        <div class="item" v-for="iml in oItem.main.rows.left" :key="iml.id" :style="{
            borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
            borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
            borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
            borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
            backgroundColor: oItem.main.oItemBgColor,
          }">
          <div class="up" :class="
              (!oItem.main.showSubTitle && !oItem.main.showCommission) ||
              (!iml.subTitle && (!iml.list || iml.list.length == 0))
                ? 'simple'
                : ''
            ">
            <div class="uLeft">
              <img :src="iml.logo" alt="" class="logo" :style="{
                  width: oItem.main.logoSize + 'px',
                  height: oItem.main.logoSize + 'px',
                }" />
            </div>
            <div class="uRight">
              <p class="title" :style="{
                  fontSize: oItem.main.titleFontSize + 'px',
                  color: oItem.main.titleFontColor,
                }">
                {{ iml.title }}
              </p>
              <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor }">
                {{ iml.subTitle }}
              </p>
            </div>
          </div>
          <div class="down" v-if="oItem.main.showCommission && iml.list && iml.list.length > 0">
            <div class="dItem" v-for="imll in iml.list" :key="imll.id">
              <div class="dILeft">
                <span class="value"
                  :style="{ color: oItem.main.commiscsionFontColor }"><i>{{ imll.commissionValue }}</i>元/单</span>
                <span class="name">{{ imll.commissionName }}</span>
              </div>
              <div class="dIRight">
                <span class="value" :style="{ color: oItem.main.commiscsionFontColor }">{{ imll.balanceValue }}</span>
                <span class="name">{{ imll.balanceName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right" :id="'previewRowsRight' + id" v-if="oItem.main.rows.right.length > 0">
        <div class="item" v-for="iml in oItem.main.rows.right" :key="iml.id" :style="{
            borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
            borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
            borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
            borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
            backgroundColor: oItem.main.itemBgColor,
          }">
          <div class="up" :class="
              (!oItem.main.showSubTitle && !oItem.main.showCommission) ||
              (!iml.subTitle && (!iml.list || iml.list.length == 0))
                ? 'simple'
                : ''
            ">
            <div class="uLeft">
              <img :src="iml.logo" alt="" class="logo" :style="{
                  width: oItem.main.logoSize + 'px',
                  height: oItem.main.logoSize + 'px',
                }" />
            </div>
            <div class="uRight">
              <p class="title" :style="{
                  fontSize: oItem.main.titleFontSize + 'px',
                  color: oItem.main.titleFontColor,
                }">
                {{ iml.title }}
              </p>
              <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor }">
                {{ iml.subTitle }}
              </p>
            </div>
          </div>
          <div class="down" v-if="oItem.main.showCommission && iml.list && iml.list.length > 0">
            <div class="dItem" v-for="imll in iml.list" :key="imll.id">
              <div class="dILeft">
                <span class="value"
                  :style="{ color: oItem.main.commiscsionFontColor }"><i>{{ imll.commissionValue }}</i>元/单</span>
                <span class="name">{{ imll.commissionName }}</span>
              </div>
              <div class="dIRight">
                <span class="value" :style="{ color: oItem.main.commiscsionFontColor }">{{ imll.balanceValue }}</span>
                <span class="name">{{ imll.balanceName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="wrapper" :class="oItem.main.listStyle" v-if="oItem.main.listStyle === 'row3'">
      <div class="left" :id="'previewRowsLeft' + id" v-if="oItem.main.rows.left.length > 0">
        <div class="item" v-for="iml in oItem.main.rows.left" :key="iml.id" :style="{
            borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
            borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
            borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
            borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
            backgroundColor: oItem.main.oItemBgColor,
          }">
          <div class="logo">
            <img :src="iml.logo" alt="" class="logo" :style="{
                width: oItem.main.logoSize + 'px',
                height: oItem.main.logoSize + 'px',
              }" />
          </div>

          <p class="title" :style="{
              fontSize: oItem.main.titleFontSize + 'px',
              color: oItem.main.titleFontColor,
            }">
            {{ iml.title }}
          </p>

          <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor }">
            {{ iml.subTitle }}
          </p>

          <div class="commission" v-if="oItem.main.showCommission && iml.list && iml.list.length > 0">
            <p v-for="imll in iml.list" :key="imll.id">
              <span>{{ imll.commissionValue }}</span>元/单
            </p>
          </div>
        </div>
      </div>

      <div class="center" :id="'previewRowsCenter' + id" v-if="oItem.main.rows.center.length > 0">
        <div class="item" v-for="iml in oItem.main.rows.center" :key="iml.id" :style="{
            borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
            borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
            borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
            borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
            backgroundColor: oItem.main.itemBgColor,
          }">
          <div class="logo">
            <img :src="iml.logo" alt="" class="logo" :style="{
                width: oItem.main.logoSize + 'px',
                height: oItem.main.logoSize + 'px',
              }" />
          </div>

          <p class="title" :style="{
              fontSize: oItem.main.titleFontSize + 'px',
              color: oItem.main.titleFontColor,
            }">
            {{ iml.title }}
          </p>

          <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor }">
            {{ iml.subTitle }}
          </p>

          <div class="commission" v-if="oItem.main.showCommission && iml.list && iml.list.length > 0">
            <p v-for="imll in iml.list" :key="imll.id">
              <span>{{ imll.commissionValue }}</span>元/单
            </p>
          </div>
        </div>
      </div>

      <div class="right" :id="'previewRowsRight' + id" v-if="oItem.main.rows.right.length > 0">
        <div class="item" v-for="iml in oItem.main.rows.right" :key="iml.id" :style="{
            borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
            borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
            borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
            borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
            backgroundColor: oItem.main.itemBgColor,
          }">
          <div class="logo">
            <img :src="iml.logo" alt="" class="logo" :style="{
                width: oItem.main.logoSize + 'px',
                height: oItem.main.logoSize + 'px',
              }" />
          </div>

          <p class="title" :style="{
              fontSize: oItem.main.titleFontSize + 'px',
              color: oItem.main.titleFontColor,
            }">
            {{ iml.title }}
          </p>

          <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor }">
            {{ iml.subTitle }}
          </p>

          <div class="commission" v-if="oItem.main.showCommission && iml.list && iml.list.length > 0">
            <p v-for="imll in iml.list" :key="imll.id">
              <span>{{ imll.commissionValue }}</span>元/单
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="wrapper" :class="oItem.main.listStyle" v-if="oItem.main.listStyle === 'list'">
      <div class="item" v-for="iml in oItem.main.list" :key="iml.id" :style="{
          borderTopLeftRadius: oItem.main.borderRadiusTop + 'px',
          borderTopRightRadius: oItem.main.borderRadiusTop + 'px',
          borderBottomLeftRadius: oItem.main.borderRadiusBottom + 'px',
          borderBottomRightRadius: oItem.main.borderRadiusBottom + 'px',
          backgroundColor: oItem.main.itemBgColor,
        }">
        <div class="left" :class="
            (!oItem.main.showSubTitle && !oItem.main.showCommission) ||
            (!iml.subTitle && (!iml.list || iml.list.length == 0))
              ? 'noRight'
              : ''
          ">
          <img :src="iml.logo" alt="" class="logo" :style="{
              width: oItem.main.logoSize + 'px',
              height: oItem.main.logoSize + 'px',
            }" />
          <p class="title" :style="{
              color: oItem.main.titleFontColor,
              fontSize: oItem.main.titleFontSize + 'px',
            }">
            {{ iml.title }}
          </p>
        </div>
        <div class="right" v-if="
            (oItem.main.showSubTitle && iml.subTitle) ||
            (oItem.main.showCommission && iml.list && iml.list.length > 0)
          ">
          <p class="subTitle" v-if="oItem.main.showSubTitle" :style="{ color: oItem.main.subTitleFontColor }">
            {{ iml.subTitle }}
          </p>
          <div class="formItem" v-if="oItem.main.showCommission">
            <div class="fItem" v-for="imll in iml.list" :key="imll.id">
              <div class="fLeft">
                <span class="value"
                  :style="{ color: oItem.main.commiscsionFontColor }"><i>{{ imll.commissionValue }}</i>元/单</span>
                <span class="name">{{ imll.commissionName }}</span>
              </div>
              <div class="fRight">
                <span class="value" :style="{ color: oItem.main.commiscsionFontColor }">{{ imll.balanceValue }}</span>
                <span class="name">{{ imll.balanceName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    mapState
  } from "vuex";
  export default {
    name: "projectComponent",
    data() {
      return {
        oItem: null,
        // rowsPushIndex: 0, //双列或三列，展示瀑布流布局时，显示当应该载入哪个位置上的元素了
        leftHeight: 0, //双列或三列，显示左列的容器高度
        centerHeight: 0, //双列或三列，显示中间列的容器高度
        rightHeight: 0, //双列或三列，显示右列的容器高度
        backgroundImage: "",
        isReLayout: false, //在否正在绘制布局，绘制中的话，触发重绘后，先laoding阻止，等完成后再继续执行
      };
    },
    created() {},
    props: ["item", "ename", "id"],
    components: {},
    mounted() {
      this.$nextTick(() => {
        this.init();
      });
    },
    methods: {
      //页面初始化
      init() {
        // //console.log("进入init");
        this.oItem = null;
        this.oItem = JSON.parse(JSON.stringify(this.item));
        this.initSetData();
      },
      initSetData() {
        // //console.log("initSetData() 设置显示数据");
        // //console.log("oItem listStyle： ",this.oItem.main.listStyle);
        this.backgroundImage = `url("${this.oItem.main.projectWrapperBgImg}")`;
        if (
          this.oItem.main.listStyle === "row2" ||
          this.oItem.main.listStyle === "row3"
        ) {
          // //console.log(this.oItem.main.listStyle,this.isReLayout);
          if (this.isReLayout) {
            // //console.log("当前绘制中，新请求等待");
            this.interceptorHandle();
          } else {
            // //console.log("init中开始执行绘制中");
            this.initSetRowsData();
          }
        } else {
          // //console.log("当前listStyle： ",this.oItem.main.listStyle);
          // //console.log("list: ",this.oItem.main.list);
        }
      },
      //若重绘渲染未结束，设置新的重绘事件等待，待重绘完成后在执行
      interceptorHandle() {
        setTimeout(() => {
          if (this.isReLayout) {
            // //console.log("当前绘制中，新请求等待");
            this.interceptorHandle();
          } else {
            // //console.log("init中开始执行绘制中");
            this.initSetRowsData();
          }
        }, 1000);
      },
      //页面初始化时根据配置的列，设置不同的数据，展现出来
      initSetRowsData() {
        // //console.log("初始化绘制第一行");

        // //console.log("设置正在渲染状态",this.oItem.main.list);
        this.isReLayout = true;

        let rowsPushIndex = 0;

        let len = this.oItem.main.list.length;
        // //console.log("len ", len,this.oItem.main.list,this.oItem.main.list.length);
        this.oItem.main.rows.left = [];
        this.oItem.main.rows.right = [];

        if (rowsPushIndex < len && this.oItem.main.list[rowsPushIndex]) {
          const oItem = this.oItem.main.list[rowsPushIndex];
          this.oItem.main.rows.left.push(oItem);
          // //console.log("左侧列表载入");
          rowsPushIndex++;
        }

        if (this.oItem.main.listStyle === "row3") {
          this.oItem.main.rows.center = [];
          if (
            rowsPushIndex < len &&
            this.oItem.main.list[rowsPushIndex]
          ) {
            const oItem = this.oItem.main.list[rowsPushIndex];
            this.oItem.main.rows.center.push(oItem);
            // //console.log("中间列表载入");
            rowsPushIndex++;
          }
        }

        if (rowsPushIndex < len && this.oItem.main.list[rowsPushIndex]) {
          const oItem = this.oItem.main.list[rowsPushIndex];
          this.oItem.main.rows.right.push(oItem);
          // //console.log("右侧列表载入");
          rowsPushIndex++;
        }

        this.$nextTick(() => {
          if (document.getElementById(`rowsLeft${this.id}`)) {
            this.leftHeight = document.getElementById(
              `previewRowsLeft${this.id}`
            ).offsetHeight;
            // //console.log("更新左侧容器高度");
          }

          if (this.oItem.main.listStyle === "row3") {
            if (
              (this.centerHeight = document.getElementById(
                `previewRowsCenter${this.id}`
              ))
            ) {
              this.centerHeight = document.getElementById(
                `previewRowsCenter${this.id}`
              ).offsetHeight;
              // //console.log("更新中间容器高度");
            }
          }

          if (document.getElementById(`previewRowsRight${this.id}`)) {
            this.rightHeight = document.getElementById(
              `previewRowsRight${this.id}`
            ).offsetHeight;
            // //console.log("右侧中间容器高度");
          }

          // //console.log("初始化第一次后：",rowsPushIndex,len);

          this.loadDomInWrapper(
            this.oItem.main.listStyle,
            rowsPushIndex,
            len
          );
        });
      },
      //双列或三列时，载入数据(等用于载入DOM到容器中)
      loadDomInWrapper(listStyle, rowsPushIndex, len) {
        // //console.log("递归渲染瀑布流", listStyle,rowsPushIndex,len);
        let rpi = rowsPushIndex;

        if (rpi < len) {
          // //console.log("递归渲染瀑布流 - 未完成, rpi = ", rpi, len);
          if (listStyle === "row2") {
            if (this.rightHeight < this.leftHeight) {
              if (this.oItem.main.list[rpi]) {
                const item = this.oItem.main.list[rpi];
                this.oItem.main.rows.right.push(item);

                rpi++;
                // //console.log("两列布局 右侧载入 rpi",rpi);
              }
            } else {
              if (this.oItem.main.list[rpi]) {
                const item = this.oItem.main.list[rpi];
                this.oItem.main.rows.left.push(item);
                rpi++;
                // //console.log("两列布局 左侧载入 rpi",rpi);
              }
            }
          } else if (listStyle === "row3") {
            const rh = this.rightHeight,
              lh = this.leftHeight,
              ch = this.centerHeight;

            if (rh < lh && rh < ch) {
              if (this.oItem.main.list[rpi]) {
                const oItem = this.oItem.main.list[rpi];
                this.oItem.main.rows.right.push(oItem);
                rpi++;
              }
            } else if (ch < lh && ch <= rh) {
              if (this.oItem.main.list[rpi]) {
                const oItem = this.oItem.main.list[rpi];
                this.oItem.main.rows.center.push(oItem);
                rpi++;
              }
            } else {
              if (this.oItem.main.list[rpi]) {
                const oItem = this.oItem.main.list[rpi];
                this.oItem.main.rows.left.push(oItem);
                rpi++;
              }
            }
          }
          this.$nextTick(() => {
            if (
              (this.leftHeight = document.getElementById(
                `previewRowsLeft${this.id}`
              ))
            ) {
              this.leftHeight = document.getElementById(
                `previewRowsLeft${this.id}`
              ).offsetHeight;
            }
            if (listStyle === "row3") {
              if (document.getElementById(`previewRowsCenter${this.id}`)) {
                this.centerHeight = document.getElementById(
                  `previewRowsCenter${this.id}`
                ).offsetHeight;
              }
            }
            if (document.getElementById(`previewRowsRight${this.id}`)) {
              this.rightHeight = document.getElementById(
                `previewRowsRight${this.id}`
              ).offsetHeight;
            }
            // //console.log("开始递归, listStyle,rpi, len",listStyle, rpi, len);
            this.loadDomInWrapper(listStyle, rpi, len);
          });
        } else {
          // //console.log("递归渲染瀑布流 - 已完成");
          this.isReLayout = false;
          // //console.log("改变状态", this.isReLayout);
        }
      },
    },
    computed: mapState(["decorate"]),
    watch: {},
  };
</script>
<style scoped lang="scss">
  .projectComponent {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;

    .wrapper {
      display: flex;
      box-sizing: border-box;

      .item {
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 4px;
        border: 1px solid #ebeef5;
        background-color: #fff;
        overflow: hidden;
        color: #303133;
        transition: 0.3s;
        padding: 10px;
        box-sizing: border-box;
        display: flex;
      }

      &.row2 {
        display: block;
        overflow: hidden;

        .left {
          float: left;
          margin-right: 14px;
        }

        .right {
          float: right;
        }

        .left,
        .right {
          width: calc(50% - 7px);

          .item {
            align-items: center;
            margin-bottom: 14px;
            display: flex;
            flex-direction: column;

            .up {
              width: 100%;
              display: flex;
              justify-content: flex-start;

              &.simple {
                align-items: center;

                .uRight {
                  .title {
                    margin-bottom: 0px;
                  }
                }
              }

              .uLeft {
                .logo {
                  border-radius: 100%;
                  display: block;
                }
              }

              .uRight {
                padding-left: 10px;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                justify-content: center;

                .title {
                  display: block;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  overflow: hidden;
                  margin-bottom: 5px;
                }

                .subTitle {
                  font-size: 12px;
                  text-overflow: ellipsis;
                  color: #666;
                  white-space: nowrap;
                  overflow: hidden;
                  display: block;
                }
              }
            }

            .down {
              width: 100%;
              display: flex;
              padding-top: 15px;
              flex-direction: column;
              font-size: 12px;

              .dItem {
                display: flex;
                justify-content: space-between;

                &:last-child {
                  .dILeft {
                    .name {
                      margin-bottom: 0;
                    }
                  }
                }

                .dILeft {
                  width: 50%;
                  border-right: 1px solid #eee;
                  box-sizing: border-box;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-start;

                  .value {
                    margin-bottom: 3px;

                    i {
                      font-style: normal;
                      font-size: 16px;
                    }
                  }

                  .name {
                    color: #999;
                    margin-bottom: 10px;
                  }
                }

                .dIRight {
                  display: flex;
                  flex-direction: column;
                  align-items: flex-end;

                  .value {
                    margin-bottom: 3px;

                    i {
                      font-style: normal;
                      font-size: 16px;
                    }
                  }

                  .name {
                    color: #999;
                  }
                }
              }
            }
          }
        }
      }

      &.row3 {
        display: block;
        overflow: hidden;

        .left,
        .center {
          float: left;
        }

        .center {
          margin: 0 15px;
        }

        .right {
          float: right;
        }

        .left,
        .center,
        .right {
          width: calc(33.33% - 10px);

          .item {
            margin-bottom: 15px;
            flex-direction: column;

            div.logo {
              padding: 5px 0 10px;
              border-bottom: 1px solid #eee;
              margin-bottom: 10px;
              width: 100%;
              display: flex;
              justify-content: center;
            }

            .title {
              color: #333;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              display: block;
              text-align: center;
            }

            .subTitle {
              font-size: 12px;
              padding-top: 10px;
              padding-bottom: 5px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
              display: block;
              text-align: center;
              color: #666;
            }

            .commission {
              font-size: 12px;
              padding-top: 10px;

              p {
                background-color: #ff4500;
                color: #fff;
                border-radius: 20px;
                width: 100%;
                margin: 0 0 10px;
                height: 24px;
                text-align: center;
                line-height: 24px;

                &:last-child {
                  margin-bottom: 0;
                }
              }
            }
          }
        }
      }

      &.list {
        flex-direction: column;

        .item {
          margin-bottom: 15px;

          &:last-child {
            margin-bottom: 0;
          }

          .left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 28%;
            border-right: 1px solid #eee;
            box-sizing: border-box;

            .logo {
              margin-bottom: 10px;
            }

            .title {
              color: #333;
            }

            &.noRight {
              flex-direction: row;
              border: none;
              width: 100%;
              justify-content: flex-start;
              padding-left: 15px;
              box-sizing: border-box;

              img {
                margin-bottom: 0;
                margin-right: 20px;
              }
            }
          }

          .right {
            width: 70%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-sizing: border-box;
            padding-left: 25px;

            .subTitle {
              margin-bottom: 10px;
              font-size: 14px;
              color: #333;
              padding-top: 5px;
              box-sizing: border-box;
            }

            .formItem {
              display: flex;
              flex-direction: column;
              font-size: 12px;
              margin-right: 20px;

              .fItem {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;

                &:last-child {
                  margin-bottom: 0;
                }

                .fLeft,
                .fRight {
                  display: flex;
                  flex-direction: column;

                  .name {
                    color: #999;
                  }

                  .value {
                    margin-bottom: 3px;

                    i {
                      font-style: normal;
                      font-size: 16px;
                    }
                  }
                }

                .fRight {
                  align-items: flex-end;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
